<template>
  <div>
    <h1>Wallet Panel</h1>

    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">

      <el-menu-item index="1">
        <router-link to="/ContentA">创建账号</router-link>
      </el-menu-item>
      <el-menu-item index="2">
        <router-link to="/ContentB">导入账号</router-link>
      </el-menu-item>
      <el-menu-item index="3">
        <router-link to="/ContentC">管理账号</router-link>
      </el-menu-item>
      <el-menu-item index="4">
        <router-link to="/SendCoin">转账</router-link>
      </el-menu-item>
      <el-menu-item index="5">
        <router-link to="/ShowAddress">收款</router-link>
      </el-menu-item>
      <el-menu-item index="6">
        <router-link to="/Settings">设置</router-link>
      </el-menu-item>
      <!--<el-menu-item index="4">钱包</el-menu-item>-->
    </el-menu>
    <router-view></router-view>


  </div>
</template>

<script>
  export default {
    name: "WalletDialog",
    data() {
      return {
        activeIndex: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        if (1 == key) {
          this.$router.push({path: '/ContentA'})
        } else if (2 == key) {
          this.$router.push({path: '/ContentB'})
        }else if (3 == key) {
          this.$router.push({path: '/ContentC'})
        }else if (4 == key) {
          this.$router.push({path: '/SendCoin'})
        }else if (5 == key) {
          this.$router.push({path: '/ShowAddress'})
        }else if (6 == key) {
          this.$router.push({path: '/Settings'})
        }
      }
    },
    mounted: function () {
      this.$store.commit("loadWallet")
      this.$router.push({path: '/ContentA'})
    }
  }
</script>

<style scoped>
  .router-link-active {
    text-decoration: none;
  }

  a:link {
    font-size: 12px;
    color: #000000;
    text-decoration: none;
  }
</style>
